<template>
    <div>
        <van-list class="home-pro-list" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
            @load="onLoad" v-model:error="error" :error-text="errorText">
            <van-cell v-for="item in list" :key="item.proid" class="list" @click="product(item.proid)">
                <div class="list-img">
                    <van-image :src="item.img1" lazy-load />
                </div>
                <div class="item-text">{{ item.proname }}</div>
                <div class="item-price">￥{{ item.originprice }}</div>
            </van-cell>
        </van-list>
    </div>
</template>
<script lang='ts' setup>
import router from '@/router';
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia';
import { search } from '@/service/api';
import { useCardListStore } from '@/stores/cardStore';
const cardListStore = useCardListStore();
let { keyword } = storeToRefs(cardListStore)
const list = ref<TimeList[]>([]);
const loading = ref(false);//表示待加载
const finished = ref(false);//表示加载完成
const error = ref(false);//表示加载错误
const errorText = ref('加载失败');
const limitNum = ref(20);
const count = ref(1);
type TimeList = {
    banners: string[],
    desc: string,
    originprice: number,
    category: string,
    brand: string,
    proname: string,
    proid: string,
    img1: string
}

watch(keyword, () => {
    count.value = 1;
    list.value = [];
    onLoad();

})
const onLoad = async () => {
    // 异步更新数据
    const { data } = await search(count.value, limitNum.value, cardListStore.keyword);
    limitNum.value = 10;
    if (data.code !== '200') {
        error.value = true;
        errorText.value = data.message;
        list.value = [];
        finished.value = false;
        loading.value = false;
        return
    } else if (data.data.length < limitNum.value) {
        list.value = list.value.concat(data.data);
        finished.value = true;
        loading.value = false;
        return
    } else {
        list.value = list.value.concat(data.data);
        count.value++;
        loading.value = false;
    }
};
function product(id: string) {
    router.push(`/product/${id}`)
}
</script>
<style lang="less" scoped>
.home-pro-list {
    display: flex;
    flex-flow: wrap;
    text-align: left;
    justify-content: start;
    margin-top: 10px;
    box-sizing: border-box;

    :deep(.van-list__finished-text) {
        width: 100%;
        background-color: rgb(233, 234, 233);
    }

    :deep(.van-list__error-text) {
        width: 100%;
    }

    .list {
        width: 48%;
        display: flex;
        margin: 0 3px 10px;

        .list-img {

            .van-image {
                height: 150px;
                width: 150px;
            }
        }

        .item-text {
            display: -webkit-box;
            text-overflow: ellipsis;
            text-align: left;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-all;
            color: #222;
            margin: 5px 0;
        }

        .item-price {
            text-align: left;
            font-weight: 700;
            color: #e3251c;
        }
    }
}
</style>